import 'package:flutter/material.dart';
import 'package:date_format/date_format.dart';
import 'package:flutter_cupertino_date_picker/flutter_cupertino_date_picker.dart';

class TransferCom extends StatefulWidget {
  @override
  _TransferComState createState() => _TransferComState();
}

class _TransferComState extends State<TransferCom> {
  TextEditingController spendController = TextEditingController();

  String dropValue = '现金';
  String dateValue = '请选择';

  // 分类菜单
  Row dropdownMenuItem() {
    return Row(
      children: [
        DropdownButtonHideUnderline(
          child: DropdownButton<String>(
            value: dropValue,
            onChanged: (String newValue) {
              setState(() {
                dropValue = newValue;
              });
            },
            items: ['现金', '信用卡', '银行卡', '微信', '支付宝', '其他'].map((value) {
              return DropdownMenuItem(
                value: value,
                child: Text(value),
              );
            }).toList(),
            style: TextStyle(
              color: Colors.black87,
              fontSize: 20.0,
            ),
          ),
        ),
      ],
    );
  }

  // 箭头图标
  Widget arrorIcon() {
    return Icon(
      Icons.keyboard_arrow_right,
      color: Colors.black87,
      size: 28.0,
    );
  }

  Container contarnerFn(text) {
    return Container(
      margin: EdgeInsets.only(left: 10.0),
      child: Text(
        text,
        style: TextStyle(
          color: Colors.black87,
          fontSize: 20.0,
        ),
      ),
    );
  }

  // 时间组件
  DateTime _dateTime = DateTime.now();
  _showDatePicker() {
    DatePicker.showDatePicker(
      context,
      onMonthChangeStartWithFirstDate: true,
      pickerTheme: DateTimePickerTheme(
        showTitle: true,
        confirm: Text('确定', style: TextStyle(color: Colors.red)),
        cancel: Text('取消', style: TextStyle(color: Colors.red)),
      ),
      minDateTime: DateTime.parse('1990-07-01'),
      maxDateTime: DateTime.parse('2020-12-31'),
      initialDateTime: _dateTime,
      dateFormat: 'yy-M-d EEE,H时:m分',
      pickerMode: DateTimePickerMode.datetime, // 在使用日期-时间组件的时候添加
      locale: DateTimePickerLocale.zh_cn,
      onCancel: () => print('onCancel'),
      onConfirm: (dateTime, List<int> index) {
        setState(() {
          _dateTime = dateTime;
        });
      },
    );
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      padding: EdgeInsets.fromLTRB(20.0, 30.0, 0, 0),
      child: Column(
        children: [
          TextField(
            controller: spendController,
            keyboardType: TextInputType.number,
            cursorColor: Colors.orange[400],
            decoration: InputDecoration(
              hintText: "0.00",
              hintStyle: TextStyle(color: Colors.orange[400]),
              // 设置失焦时的边框样式
              enabledBorder: UnderlineInputBorder(
                borderSide: BorderSide(
                  color: Colors.orange[400],
                  width: 3.0,
                ),
              ),
              // 设置聚焦时候边框样式
              focusedBorder: UnderlineInputBorder(
                borderSide: BorderSide(
                  color: Colors.orange[400],
                  width: 3.0,
                ),
              ),
            ),
            style: TextStyle(
              fontSize: 36.0,
              color: Colors.orange[400],
              fontWeight: FontWeight.bold,
            ),
            autofocus: true,
          ),
          SizedBox(height: 30.0),
          Row(
            children: [
              Icon(
                Icons.payment,
                color: Colors.green[400],
                size: 30.0,
              ),
              contarnerFn('转出 '),
              arrorIcon(),
              dropdownMenuItem(),
            ],
          ),
          SizedBox(height: 6.0),
          Row(
            children: [
              Icon(
                Icons.payment,
                color: Colors.red[400],
                size: 30.0,
              ),
              contarnerFn('转入 '),
              arrorIcon(),
              dropdownMenuItem(),
            ],
          ),
          SizedBox(height: 16.0),
          Row(
            children: [
              Icon(
                Icons.alarm,
                color: Colors.orange,
                size: 30.0,
              ),
              contarnerFn('时间 '),
              arrorIcon(),
              InkWell(
                child: Text(
                  '${formatDate(_dateTime, [
                    yyyy,
                    '-',
                    mm,
                    '-',
                    dd,
                    ' ',
                    HH,
                    ':',
                    nn,
                  ])}',
                  style: TextStyle(
                    color: Colors.black87,
                    fontSize: 22.0,
                    fontWeight: FontWeight.normal,
                  ),
                ),
                onTap: _showDatePicker,
              )
            ],
          ),
          SizedBox(height: 16.0),
          Row(
            children: [
              Icon(
                Icons.brush,
                color: Colors.purple[800],
                size: 30.0,
              ),
              contarnerFn('备注'),
              arrorIcon(),
              Expanded(
                child: TextField(
                  controller: spendController,
                  keyboardType: TextInputType.number,
                  cursorColor: Colors.black87,
                  decoration: InputDecoration(
                    hintText: '···',
                    hintStyle: TextStyle(
                      color: Colors.black87,
                      fontWeight: FontWeight.normal,
                    ),
                    border: InputBorder.none,
                  ),
                  style: TextStyle(
                    fontSize: 20.0,
                    color: Colors.black87,
                    fontWeight: FontWeight.bold,
                  ),
                  autofocus: true,
                ),
              )
            ],
          )
        ],
      ),
    );
  }
}
